<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>诗词结缘</title>
		<style type="text/css">
			body {

				/* background: url(./img/bg.jpg);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: 100% 100%; */
				box-sizing: border-box;
			}

			.ballBox {
				padding: 0.3rem;
				box-sizing: border-box;
				margin: 0 !important;

				/* background: url(./img/bg.jpg);
				background-repeat: no-repeat;
				background-size: 100% 100vh;
				background-position: 100% 100%; */
				box-sizing: border-box;
			}

			#screen {
				width: 100%;
				height: 4rem;
				position: relative;
				vertical-align: bottom;
				padding: 0 !important;
				margin: 0 !important;
			}

			*::-webkit-scrollbar {
				display: none !important;
				/* Chrome Safari */
			}



			#inner {
				position: absolute;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
				font-size: 0.4rem;
				text-align: center;
				line-height: 1rem;
			}

			#inner::-webkit-scrollbar {
				display: none !important;
				/* Chrome Safari */
			}

			#screen p {
				color: white;
				font: bold 14px;
			}

			.one {
				/* background: url('./img/QP1.png') no-repeat; */
				background: linear-gradient(to bottom, #F53F3F, #ffffff);
				background-size: 100% auto;
				border-radius: 50%;
				box-shadow: 0px 0rem 0.32rem rgba(0, 0, 0, 0.17);
				color: rgba(255, 255, 255, 0.75);
			}

			.two {
				background: linear-gradient(to bottom, #F77234, #ffffff);
				background-size: auto 100%;
				border-radius: 50%;
				box-shadow: 0px 0rem 0.32rem rgba(0, 0, 0, 0.17);
				color: rgba(255, 255, 255, 0.75);
			}

			.three {
				background: linear-gradient(to bottom, #483D8B, #ffffff);
				background-size: auto 100%;
				border-radius: 50%;
				box-shadow: 0px 0rem 0.32rem rgba(0, 0, 0, 0.17);
				color: rgba(255, 255, 255, 0.75);
			}

			.four {
				background: linear-gradient(to bottom, #008080, #ffffff);
				background-size: auto 100%;
				border-radius: 50%;
				box-shadow: 0px 0rem 0.32rem rgba(0, 0, 0, 0.17);
				color: rgba(255, 255, 255, 0.75);
			}

			.five {
				background: linear-gradient(to bottom, #2E8B57, #ffffff);
				background-size: auto 100%;
				border-radius: 50%;
				box-shadow: 0px 0rem 0.32rem rgba(0, 0, 0, 0.17);
				color: rgba(255, 255, 255, 0.75);
			}

			.six {
				background: linear-gradient(to bottom, #808000, #ffffff);
				background-size: auto 100%;
				border-radius: 50%;
				box-shadow: 0px 0rem 0.32rem rgba(0, 0, 0, 0.17);
				color: rgba(255, 255, 255, 0.75);
			}

			.seven {
				background: linear-gradient(to bottom, #CD853F, #ffffff);
				background-size: auto 100%;
				border-radius: 50%;
				box-shadow: 0px 0rem 0.32rem rgba(0, 0, 0, 0.17);
				color: rgba(255, 255, 255, 0.75);
			}

			.eight {
				background: linear-gradient(to bottom, #F53F3F, #ffffff);
				background-size: auto 100%;
				border-radius: 50%;
				box-shadow: 0px 0rem 0.32rem rgba(0, 0, 0, 0.17);
				color: rgba(255, 255, 255, 0.75);
			}

			.nine {
				background: linear-gradient(to bottom, #F77234, #ffffff);
				background-size: auto 100%;
				border-radius: 50%;
				box-shadow: 0px 0rem 0.32rem rgba(0, 0, 0, 0.17);
				color: rgba(255, 255, 255, 0.75);
			}

			.ten {
				background: linear-gradient(to bottom, #483D8B, #ffffff);
				background-size: auto 100%;
				border-radius: 50%;
				box-shadow: 0px 0rem 0.32rem rgba(0, 0, 0, 0.17);
				color: rgba(255, 255, 255, 0.75);
			}

			.ballActive {
				box-shadow: 0 0 0.5rem #FE4373 !important;
				animation: animat 2s linear infinite;
			}

			.ballActive::before {
				content: '';
				position: absolute;
				top: 0.06rem;
				left: 0.06rem;
				right: 0.06rem;
				bottom: 0.06rem;
				/*我们没有给定宽高而是通过 上下左右边距6来控制大小*/
				/*和背景一样的颜色*/
				border-radius: 50%;
				z-index: 999;
				/*控制该层在最上方*/
			}

			.ballActive::after {
				content: '';
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				background: linear-gradient(45deg, transparent, transparent 40%, #e5f403);
				border-radius: 50%;
				z-index: 1;
				filter: blur(0.3rem);
				/*高斯模糊处理*/
			}

			@keyframes animat {
				0% {
					transform: rotate(0deg);
					filter: hue-rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
					filter: hue-rotate(360deg);
				}
			}

			.next {
				color: #FE4373;
				text-align: center;
				font-size: 0.26rem;
				padding-top: 0.3rem;
				padding-bottom: 0.3rem;
			}

			.textBlock {
				margin-top: 0.1rem;
			}

			.inputContainer {
				height: 0.72rem;
				overflow: hidden;
				position: relative;
				margin-top: 0.3rem;
			}

			.inputBox {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				/* margin-top: 0.3rem; */
				height: 100%;
				background: #F7F7F7;
				border-radius: 0.36rem;
				padding-left: 0.20rem;
				font-size: 0.28rem;
				color: #323232;
				border: 0.01rem solid #ccc;
				box-sizing: border-box;
			}

			.okBtn {
				margin-top: 0.3rem;
				background: #FE4373;
				border-radius: 0.43rem;
				height: 0.85rem;
				text-align: center;
				line-height: 0.85rem;
				color: #fff;
				font-size: 0.28rem;
			}

			.footer {
				padding: 0px 0.3rem;
				position: absolute;
				bottom: 3.5rem;
				left: 0;
				right: 0;
			}

			.bgImg {
				width: 100%;
				height: 100vh;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
		</style>
	</head>
	<body class="body">
		<img src="./img/bg.gif" class="bgImg" alt="">
		<div class="ballBox">
			<div style="font-size: 0.26rem;color: #323232;padding-bottom: 0.5rem;">请小主根据今天的心情，选择一个关键字：</div>
			<div id="screen">
				<div id="inner"></div>
			</div>
			<!-- <div class="footer"> -->
			<div class="next">换一批</div>
			<div class="textBlock" style="font-size: 0.28rem;">请填写一句含关键字<span class="activeText"
					style="color:#FE4373;"></span>的古诗词：
			</div>
			<div class="inputContainer">
				<input adjust-position="false" class="inputBox" type="text" placeholder="请输入5字以上的诗句">
			</div>
			<div class="okBtn">发布结缘</div>
			<!-- </div> -->

		</div>
	</body>
	<script src="js/rem.js"></script>
	<script src="./js/test.js"></script>
	<!-- <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script> -->
	<script src="./js/uni-app.js"></script>
	<script src="js/jquery-3.7.0.min.js"></script>
	<script>
		function GetQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return unescape(r[2]);
			return null;
		}
		var url = GetQueryString("url");
		console.log(url)
		var winHeight = $(window).height();
		$(window).resize(function() {
			console.log("fei")
			var thisHeight = $(this).height();
			if (thisHeight < 1000) {
				console.log(thisHeight)
				// $(".next").css("display", "none");
				// $(".okBtn").css("display", "none");
				// $(".footer").css("bottom", "0.1rem");

			} else {
				// console.log(thisHeight)
				// var setTime = setTimeout(function() {
				// 	$(".next").css("display", "block");
				// 	$(".okBtn").css("display", "block");
				// 	$(".footer").css("bottom", "3.5rem");
				// 	clearTimeout(setTime)
				// }, 30)

			}
		})





		var selectText = ''
		var sc = null;
		var id = '';
		var activeZi = ''
		$.ajax({
			url: url + "poetry_word/lists?type=0",
			dataType: "jsonp",
			jsonp: "callback",
			async: true,
			jsonpCallback: "abc",
			success: function(res) {
				document.getElementById("inner").innerHTML = '';
				sc = new Screen('inner', {
					ballsnum: res.data.length,
					spring: 0.05,
					bounce: -0.9,
					gravity: -0.01,
					data: res.data
				});
				sc.initialize();
				$(".ball").click(function() {
					$(".ball").removeClass("ballActive");
					$(this).addClass("ballActive");
					id = $(this).attr("id")
					activeZi = $(this).text();
					$(".activeText").text(`【${$(this).text()}】`)
				})
			}
		})

		$(".next").click(function() {
			$.ajax({
				url: url + "poetry_word/lists?type=1",
				dataType: "jsonp",
				jsonp: "callback",
				jsonpCallback: "abc",
				async: true,
				success: function(res) {
					document.getElementById("inner").innerHTML = '';
					sc = new Screen('inner', {
						ballsnum: res.data.length,
						spring: 0.05,
						bounce: -0.9,
						gravity: -0.01,
						data: res.data
					});
					sc.initialize();
					$(".ball").click(function() {
						$(".ball").removeClass("ballActive");
						$(this).addClass("ballActive");
						id = $(this).attr("id")
						activeZi = $(this).text();
						$(".activeText").text(`【${$(this).text()}】`)
					})
				}
			})
		})
		window.onload = function() {
			// $(".inputBox").focus(function() {
			// 	console.log("fei")
			// 	$(".next").css("display", "none");
			// 	$(".okBtn").css("display", "none");
			// 	$(".footer").css("bottom", "0.1rem");
			// })
			// $(".inputBox").blur(function() {
			// 	console.log("fei2")
			// 	var setTime = setTimeout(function() {
			// 		$(".next").css("display", "block");
			// 		$(".okBtn").css("display", "block");
			// 		$(".footer").css("bottom", "3.5rem");
			// 		clearTimeout(setTime)
			// 	}, 30)

			// })



			$(".okBtn").click(function() {
				uni.postMessage({
					data: {
						actionText: $(".inputBox").val(),
						actionId: id,
						activeZi: activeZi
					}
				});
			})
		}
	</script>
</html>